<template>
    <view>
		<!-- :item-style="itemStyle" -->
        <u-collapse class="radius" >
			<!-- flex flex-wrap -->
			<!-- class="margin-bottom bg-white padding radius" -->
			<u-collapse-item v-for="(item, index) in itemList" :key="index" :index="index" :open="item.open"  @change="change">
				<template #title-all>
					<view class="flex title-all">
						<view class="u-collapse-title u-line-1 basis-xl text-xl justify-center text-bold " @click="clickHandler(index)">{{ item.name }}<text class="text-red text-lg margin-left-sm">{{ item.count ? '('+item.count+')' : '' }}</text></view>
						<view class="u-icon-wrap basis-xs justify-end" @click="clickHandler(index)">
							{{ item.open ? '收起' : '展开' }} <u-icon :name="item.open ? 'arrow-up' : 'arrow-down'"/>
						</view>
					</view>
				</template>
				<template>
					<!--  -->
					<view class="bg-gray padding-sm margin-bottom radius" v-for="(eleItem123, index) in item.data" :key="index"  @click="goRouter($event,JSON.stringify(eleItem123))">
						<view class="flex align-center margin-bottom-sm justify-between">
							
							<!-- <text>{{ JSON.stringify(eleItem.procIns.procDef) }}</text> -->
							<view class="basis-df text-lg flex align-center">
								<view style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;width: 40px;text-align: center;font-style: italic;font-weight: bold" class="margin-right-sm">
									{{ index + 1 }}
								</view>
								<view class="text-lg">{{ eleItem123.name }}</view>
							</view>
							<view class="text-lg">{{ eleItem123.procIns.procDef.name }}</view>
						</view>
						<view class="bg-line margin-bottom-sm"></view>
						
						<view class="text-sm margin-bottom-sm">{{ eleItem123.procIns.name }}</view>
						<view class="flex justify-between align-center">
						<view class="flex">{{ eleItem123.createTime }}</view>
						<text class="cuIcon-share padding text-xsl flex" @click.stop="share(JSON.stringify(eleItem123))" v-if="!eleItem123.extendMap.openForm"></text></view>
						<!--  -->
						
					</view>
					
				</template>
			</u-collapse-item>
		</u-collapse>

		<view style="height: 108rpx"></view>
		<custom-tab-bar ref="customtab1" :current-index="currentIndex" @changeTab="handleTabChange" v-if="customTabBar"/>
        
    </view>
</template>
<script>
import customTabBar from '@/pages/zfgs/index/componetns/customTabBar.vue';
import bpmUtils from '@/pages/bpm/bpmUtils.js';
export default {
	components: {customTabBar },
  data() {
    return {
		itemStyle: {
			borderRadius: '10rpx',
			margin: '20rpx 32rpx',
			backgroundColor: '#fff',
			padding: '20rpx 30rpx'
		},
	  activeNames: [], // 用于控制u-collapse的展开状态
      itemList: [ ],
	  currentIndex:0,
	  lct:"/static/image/zfgs/lct.png",
	  customTabBar:true,
    };
  },
  created() {

	
  },
    onShow() {
	this.$refs.customtab1.getcountData()
	this.$refs.customtab1.getMsgCount()
    // if (this.customTabBar) {
    //   this.customTabBar = false;
    //   setTimeout(() => {
    //     this.customTabBar = true;
    //   }, 100);
    // } else {
    //   this.customTabBar = true;
    // }
	this.getTypeData()	
  },
  onLoad(){
	// this.getTypeData()	
  },
  methods: {
	share(eleItem){
		console.log(eleItem,'eleItem')
		const ele = JSON.parse(eleItem)
		bpmUtils.navTrace(this, 'id=' + ele.procIns.id);
	},
	goRouter(event,eleItem){
		event.preventDefault();
		
		const ele = JSON.parse(eleItem)
		const openForm = ele.extendMap.openForm;
		console.log(ele,'ele',openForm)

		const mobileUrl =  ele.extendMap.bpmForm.mobileUrl;
		// const mobileUrl = "/pages/zfgs/proj/enex/pmApproach/list";
		console.log(mobileUrl,'mobileUrl===')
		
		if(!!openForm){
			console.log(mobileUrl,'mobileUrl')
			uni.navigateTo({
				url: mobileUrl
			})

		}else{
			const url = ele.extendMap.bpmForm.mobileUrl;
			const idx = url.indexOf('?');
			const compStr = idx == -1 ? url : url.substring(0, idx);
			if (compStr && compStr != '') {
				// url把id拼接在url后面
				
				const id = ele.procIns.bizKey;
				const compStrUrl = compStr +  '?id=' + id  + '&bpm.taskId=' + ele.id + '&bpm.procInsId=' + ele.procIns.id + '&bpm.activityId=' + ele.activityId;
				console.log(mobileUrl,'compStrUrl===',id,compStr,compStrUrl)
				uni.navigateTo({
					url: compStrUrl
				})
			}
		}


	},
	getTypeData(){
		this.$u.api.bpm.typeData().then((res)=>{
			if(res.result == 'true'){
				// json串转对象
				this.itemList = res.data
				this.itemList.forEach((item, index) => {
					item.open = false
				})
			}
		})
	},
	handleTabChange(pagePath) {
      // 切换页面逻辑，可使用uni.navigateTo等API
      uni.reLaunch({ url: pagePath });
    },
    clickHandler(index) {
		// const item = this.itemList[index];
		// this.$set(this.itemList[index], "open", !item.open);
    },
	change(item){
		console.log(item);
		
		this.itemList = this.itemList.map((e,i)=>{
			if(item.index == i){
				e.open = item.show
			}else{
				e.open = false
			}
			return e
		})
		
		// this.itemList[item.index].open = item.show
		// this.itemList = this.itemList
		// this.$set(this.itemList[item.index], "open", item.show);
	}
  },
};
</script>
<style lang="scss" scoped>
.title-all{
	width: 100%;
}
.u-collapse-title{
	font-size: 38rpx;
	color: #3D3D3D;
	line-height: 46rpx;
}
.u-icon-wrap{
	font-size: 30rpx;
	color: #999999;
}
.bg-gray{
	background-color: #FAFAFA;
}
.text-lg{
	font-size: 34rpx;
}
.bg-line{
	height: 1px;
	width: 100%;
	background: #8799a3;
}
.text-xsl {
  font-size: 60rpx !important;
}
// borderRadius: '10rpx',
// 			margin: '20rpx 32rpx',
// 			backgroundColor: '#fff',
// 			padding: '20rpx 30rpx'
::v-deep .u-collapse-item{
	border-radius: 10rpx;
	margin: 20rpx 32rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
}
</style>